import React, { Component } from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, PixelRatio, TextInput, Modal, Keyboard, Animated, Platform } from "react-native";
import { GLOBAL } from '../config/global';
import { style } from '../theme/style';
import RadioButton from '../components/form/radioButton';

const failPic = require('../imgs/store/fail.png');
const successPic = require('../imgs/store/success.png');
const scale = GLOBAL.SCALE;
const closeImg = require('../imgs/close.png')

export function ApprovalView(props) {

	const { agreePress, refusePress, showRight, agreeSignPress } = props;

	return (
		<View style={styles.bottomBtnCell}>
			<TouchableOpacity activeOpacity={0.5} style={styles.bottomBtn}
				onPress={refusePress} >
				<View style={[styles.bottomBtnView, styles.bottomBtnViewLeft]}>
					<Image source={failPic} style={styles.bottomBtnPic} />
					<Text style={styles.bottomBtnText}>驳回</Text></View>
			</TouchableOpacity>
			<TouchableOpacity activeOpacity={0.5} style={styles.bottomBtn}
				onPress={agreePress} >
				<View style={styles.bottomBtnView}>
					<Image source={successPic} style={styles.bottomBtnPic} />
					<Text style={styles.bottomBtnText}>同意</Text></View>
			</TouchableOpacity>
			{showRight ?
				<TouchableOpacity activeOpacity={0.5} style={styles.bottomBtn}
					onPress={agreeSignPress} >
					<View style={styles.bottomBtnView}>
						<Image source={successPic} style={styles.bottomBtnPic} />
						<Text style={styles.bottomBtnText}>同意并加签</Text></View>
				</TouchableOpacity> : null
			}

		</View>
	)

}

export class RefuseModal extends Component {

	// 默认属性设置
	static defaultProps = {
		visible: false,
		signVisible: false
	};

	constructor(props) {
		super(props);
		this.state = {
			keyboard: false
		}
		this.paddingTop = new Animated.Value(120 * scale)
		this.auditRemark = '';
		this.operateRemark = '';
	}


	componentWillMount() {
		this.keyboardWillShowListener = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillShow' : 'keyboardDidShow', this._keyboardWillShow.bind(this));
		this.keyboardWillHideListener = Keyboard.addListener(Platform.OS === 'ios' ? 'keyboardWillHide' : 'keyboardDidHide', this._keyboardWillHide.bind(this));
	}

	componentWillUnmount() {
		try {
			this.keyboardWillShowListener.remove();
			this.keyboardWillHideListener.remove();
		} catch (error) {
			console.log(error);
		}
	}

	_keyboardWillShow() {
		Animated.spring(this.paddingTop, {
			toValue: 80 * scale,
			duration: 300,
		}
		).start();
		this.setState({ keyboard: true });
	}

	_keyboardWillHide() {
		Animated.spring(this.paddingTop, {
			toValue: 120 * scale,
			duration: 300,
		}
		).start();
		this.setState({ keyboard: false });
	}

	render() {
		const { visible, btnPress, bgPress, placeholderText, titleText, btnText, text, maxLength, blurOnSubmit, showOperateType,
			selectedOperateType, changeOperateType, operateList, propsDefaultValue, signVisible, bgSignPress, btnSignPress, onChangeText } = this.props;
		const { keyboard } = this.state;
		// const keyboardsStyle = keyboard ? { marginTop: -90 * scale } : null;
		if (!visible) {
			this.auditRemark = '';
			this.operateRemark = '';
		}
		return (
			<View>
				<Modal animationType={"fade"}
					transparent={true}
					visible={visible}
					onRequestClose={() => { }}>
					<Animated.View style={[styles.refuseModal, { paddingTop: this.paddingTop }]}>
						{/* <TouchableOpacity activeOpacity={1} style={styles.top} onPress={bgPress}>
					</TouchableOpacity> */}
						<View style={[styles.refuseBox]}>
							<View style={{ width: '100%', paddingLeft: 24 * scale, paddingRight: 24 * scale, paddingTop: 20 * scale, paddingBottom: 4 * scale, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
								<Text style={{ fontSize: 16 * scale, fontWeight: 'bold' }}>提示</Text>
								<TouchableOpacity onPress={() => { bgPress && bgPress() }} style={{ width: 36 * scale, height: 30 * scale, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} activeOpacity={.6}>
									<Image style={{ width: 16 * scale, height: 16 * scale, tintColor: '#0E5BC6' }} source={closeImg} />
								</TouchableOpacity>
							</View>

							{
								// 选择撤销类型
								showOperateType ? (
									<View style={[styles.refuseCell, { paddingBottom: 0, paddingRight: 10 * scale }]}>
										<Text style={styles.text}><Text style={{ color: 'red' }}>*</Text>撤销类型</Text>

										<View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
											{
												operateList && operateList.map((item, index) => {
													return (
														<RadioButton
															buttonStyle={{ marginTop: 12 * scale }}
															key={index}
															radioValue={item.dictName}
															radioKey={item.dictKey}
															selectedKey={selectedOperateType}
															selectedChange={changeOperateType} />
													)
												})
											}
										</View>

										{
											selectedOperateType == 'OTHER' ? (
												< TextInput
													ref="reasonTextInput"
													style={[styles.reasonTextInput, { height: 30 * scale, width: '50%', marginBottom: 0 }]}
													underlineColorAndroid='transparent'
													returnKeyType='done'
													placeholderTextColor="#8B8B8B"
													placeholder={"请输入撤销原因"}
													maxLength={6}
													editable={true}
													onChangeText={(txt) => { this.operateRemark = txt }}
												/>
											) : null
										}

									</View>
								) : null
							}


							<View style={styles.refuseCell}>
								{text ? <Text style={{ fontSize: 14 * scale, paddingBottom: 8 * scale, lineHeight: 18 * scale }}>{text}</Text> : null}

								<Text style={styles.text}>{titleText || "驳回原因"}</Text>
								<TextInput
									ref="reasonTextInput"
									style={styles.reasonTextInput}
									underlineColorAndroid='transparent'
									returnKeyType='done'
									placeholderTextColor="#8B8B8B"
									placeholder={placeholderText || "请输入驳回原因"}
									defaultValue={propsDefaultValue || ''}
									maxLength={maxLength || 200}
									editable={true}
									multiline={true}
									blurOnSubmit={blurOnSubmit == 'false' ? false : true}
									onChangeText={(txt) => { this.auditRemark = txt; onChangeText && onChangeText(txt); }}//
								/>
								<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }}>
									<TouchableOpacity activeOpacity={0.5} style={styles.refuseBtn} onPress={() => {
										btnPress(this.auditRemark ? this.auditRemark : propsDefaultValue, this.operateRemark);
									}}>
										<Text style={styles.refuseBtnText}>提交</Text>
									</TouchableOpacity>
								</View>
							</View>
						</View>
						{/* <TouchableOpacity activeOpacity={1} style={styles.bottom} onPress={bgPress}>
					</TouchableOpacity> */}
					</Animated.View>
				</Modal>
				<Modal animationType={"fade"}
					transparent={true}
					visible={signVisible}
					onRequestClose={() => { }}>
					<Animated.View style={[styles.refuseModal, { paddingTop: this.paddingTop }]}>
						<View style={[styles.refuseBox]}>
							<View style={{ width: '100%', paddingLeft: 24 * scale, paddingRight: 24 * scale, paddingTop: 20 * scale, paddingBottom: 4 * scale, justifyContent: 'center', alignItems: 'center' }}>
								<Text style={{ fontSize: 16 * scale }}>加签提示</Text>
								<Text style={{ fontSize: 16 * scale, marginTop: 30 * scale, marginBottom: 60 * scale }}>审批通过并加签法务？</Text>
								<View style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between', height: 50 * scale }}>
									<TouchableOpacity onPress={() => { bgSignPress && bgSignPress() }} style={styles.bottomSignBtn}>
										<Text>关闭</Text>
									</TouchableOpacity>
									<TouchableOpacity onPress={() => { btnSignPress(this.auditRemark ? this.auditRemark : propsDefaultValue, this.operateRemark) }} style={styles.bottomSignBtn}>
										<Text>确认</Text>
									</TouchableOpacity>
								</View>
								{/* <TouchableOpacitystyle={{ width: 36 * scale, height: 30 * scale, flexDirection: 'row', alignItems: 'center', justifyContent: 'center' }} activeOpacity={.6}>
								<Image style={{ width: 16 * scale, height: 16 * scale, tintColor: '#0E5BC6' }} source={closeImg} />
							</TouchableOpacitystyle=> */}
							</View>
						</View>
					</Animated.View>
				</Modal>
			</View>
		);
	}
}

const styles = StyleSheet.create({
	text: {
		fontSize: 13 * scale,
		color: '#404040'
	},
	refuseBtn: {
		justifyContent: 'center',
		alignItems: 'center',
		width: 90 * scale,
		height: 36 * scale,
		backgroundColor: style.color.themeColor,
		borderRadius: 6 * scale,
	},
	refuseBtnText: {
		fontSize: 14 * scale,
		color: '#fff'
	},
	reasonTextInput: {
		marginTop: 12 * scale,
		marginBottom: 26 * scale,
		width: '100%',
		height: 96 * scale,
		borderWidth: 1 * scale,
		borderColor: '#E3E7F0',
		borderRadius: 3,
		paddingTop: 5 * scale,
		paddingBottom: 3 * scale,
		paddingLeft: 5 * scale,
		paddingRight: 3 * scale,
		fontSize: 13 * scale,
		textAlignVertical: 'top'
	},
	refuseModal: {
		width: 375 * scale,
		height: GLOBAL.SCREEN_HEIGHT,
		backgroundColor: 'rgba(0, 0, 0, .3)',
		alignItems: 'center',
	},
	top: {
		height: 190 * scale,
		width: 375 * scale,
		backgroundColor: 'transparent',
	},
	bottom: {
		// flex: 1,
		width: 375 * scale,
		height: 280 * scale,
		backgroundColor: 'transparent',
	},
	refuseBox: {
		backgroundColor: '#fff',
		borderRadius: 9,
		width: 303 * scale,
		// justifyContent: 'center',
		alignItems: 'center',
	},
	refuseCell: {
		width: '100%',
		paddingLeft: 24 * scale,
		paddingRight: 24 * scale,
		paddingTop: 22 * scale,
		paddingBottom: 22 * scale,
	},
	bottomBtnCell: {
		width: 375 * scale,
		height: 60 * scale,
		flexDirection: 'row',
		borderTopColor: '#e4e4e4',
		borderTopWidth: 1 / PixelRatio.get(),
		backgroundColor: '#fff',
	},
	bottomBtn: {
		justifyContent: 'center',
		flex: 1,
	},
	bottomSignBtn: {
		justifyContent: 'center',
		alignItems: 'center',
		flex: 1,
	},
	bottomBtnPic: {
		marginRight: 10 * scale,
	},
	bottomBtnView: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
	},
	bottomBtnViewLeft: {
		borderRightColor: '#e4e4e4',
		borderRightWidth: 1 / PixelRatio.get(),
	},
	bottomBtnText: {
		fontSize: 16 * scale,
		color: '#404040'
	},
})